<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>项目属性</title>
  <link rel="stylesheet" href="./base.css">
  <style>
    .item {
      font-size: 2em;
      text-align: center;
      border: 1px solid #e5e4e9;
    }

    .item-1 {
      background-color: #ef342a;
    }

    .item-2 {
      background-color: #f68f26;
    }

    .item-3 {
      background-color: #4ba946;
    }

    .item-4 {
      background-color: #0376c2;
    }

    .item-5 {
      background-color: #c077af;
    }

    .item-6 {
      background-color: #f8d29d;
    }

    .item-7 {
      background-color: #b5a87f;
    }

    .item-8 {
      background-color: #d0e4a9;
    }

    .item-9 {
      background-color: #4dc7ec;
    }
    .grid-column-start{
      display: inline-grid;
      grid-template-columns: 50px 50px 50px;
      grid-template-rows: 50px 50px 50px;
    }
    .grid-column-start .item-1 {
      grid-column-start: 1;
      grid-column-end: 3;
      grid-row-start: 2;
      grid-row-end: 4;
    }
    .grid-column-start-area{
      display: inline-grid;
      grid-template-columns: 50px 50px 50px;
      grid-template-rows: 50px 50px 50px;
      grid-template-areas: "header header header"
                           "main main sidebar"
                           "footer footer footer";
    }
    .grid-column-start-area .item-1 {
      grid-column-start: header-start;
      grid-column-end: header-end;
    }
    .grid-column-start-span{
      display: inline-grid;
      grid-template-columns: 50px 50px 50px;
      grid-template-rows: 50px 50px 50px;
    }
    .grid-column-start-span .item-1 {
      grid-column-start: span 2;
      grid-row-start: span 2;
    }
    .grid-column-row{
      display: inline-grid;
      grid-template-columns: 50px 50px 50px;
      grid-template-rows: 50px 50px 50px;
    }
    .grid-column-row .item-1{
      grid-column: 1 / 3;
      grid-row: 1 / 3;
      z-index: 1;
    }
    .grid-column-row .item-2{
      grid-column: 2 / 4;
      grid-row: 1 / 2;
    }
    .grid-column-row-span{
      display: inline-grid;
      grid-template-columns: 50px 50px 50px;
      grid-template-rows: 50px 50px 50px;
      /* grid-auto-flow: row dense; */
    }
    .grid-column-row-span .item-1{
      grid-column: span 2;
    }
    .grid-column-row-span .item-2{
      grid-row: span 2;
      grid-column: span 2;
    }
    .grid-area{
      display: inline-grid;
      grid-template-columns: 50px 50px 50px;
      grid-template-rows: 50px 50px 50px;
      grid-template-areas:  "a b c"
                            "d e f"
                            "g h i";
    }
    .grid-area .item-1{
      grid-area: e;
    }
    .grid-area-num{
      display: inline-grid;
      grid-template-columns: 50px 50px 50px;
      grid-template-rows: 50px 50px 50px;
    }
    .grid-area-num .item-2 {
      grid-area: 2 / 2 / 4 / 4;
    }
    .grid-self{
      display: inline-grid;
      grid-template-columns: 100px 100px 100px;
      grid-template-rows: 100px 100px 100px;
      border: 1px solid #ccc;
    }
    .grid-self .item-1{
      justify-self: center;
      align-self: center;
    }
    .grid-self .item-3{
      place-self: center;
    }
    .grid-self .item-5{
      place-self: center start;
    }
  </style>
</head>
<body>
  <section>
    <p>grid-column-start属性：左边框所在的垂直网格线</p>
    <p>grid-column-end属性：右边框所在的垂直网格线</p>
    <p>grid-row-start属性：上边框所在的水平网格线</p>
    <p>grid-row-end属性：下边框所在的水平网格线</p>
    <p>使用这四个属性，如果产生了项目的重叠，则使用z-index属性指定项目的重叠顺序</p>
    <p>使用span关键字时grid-column-start和grid-column-end只需要设置一个，上面的会覆盖下面的</p>
    <div class="grid-column-start">
      <div class="item item-1">1</div>
      <div class="item item-2">2</div>
      <div class="item item-3">3</div>
      <div class="item item-4">4</div>
      <div class="item item-5">5</div>
      <div class="item item-6">6</div>
      <div class="item item-7">7</div>
      <div class="item item-8">8</div>
      <div class="item item-9">9</div>
    </div>
    <div class="grid-column-start-area">
      <div class="item item-1">1</div>
      <div class="item item-2">2</div>
      <div class="item item-3">3</div>
      <div class="item item-4">4</div>
      <div class="item item-5">5</div>
      <div class="item item-6">6</div>
      <div class="item item-7">7</div>
      <div class="item item-8">8</div>
      <div class="item item-9">9</div>
    </div>
    <div class="grid-column-start-span">
      <div class="item item-1">1</div>
      <div class="item item-2">2</div>
      <div class="item item-3">3</div>
      <div class="item item-4">4</div>
      <div class="item item-5">5</div>
      <div class="item item-6">6</div>
      <div class="item item-7">7</div>
      <div class="item item-8">8</div>
      <div class="item item-9">9</div>
    </div>
  </section>
  <div class="divider"></div>
  <section>
    <p>grid-column属性是grid-column-start和grid-column-end的合并简写形式，grid-row属性是grid-row-start属性和grid-row-end的合并简写形式</p>
    <p>grid-column: start-line / end-line;
      grid-row: start-line / end-line</p>
    <p>这两个属性之中，也可以使用span关键字，表示跨越多少个网格，不会产生重叠</p>
    <p>斜杠以及后面的部分可以省略，默认跨越一个网格</p>
    <div class="grid-column-row">
      <div class="item item-1">1</div>
      <div class="item item-2">2</div>
      <div class="item item-3">3</div>
      <div class="item item-4">4</div>
      <div class="item item-5">5</div>
      <div class="item item-6">6</div>
      <div class="item item-7">7</div>
      <div class="item item-8">8</div>
      <div class="item item-9">9</div>
    </div>
    <div class="grid-column-row-span">
      <div class="item item-1">1</div>
      <div class="item item-2">2</div>
      <div class="item item-3">3</div>
      <div class="item item-4">4</div>
      <div class="item item-5">5</div>
      <div class="item item-6">6</div>
      <div class="item item-7">7</div>
      <div class="item item-8">8</div>
      <div class="item item-9">9</div>
    </div>
  </section>
  <div class="divider"></div>
  <section>
    <p>grid-area属性指定项目放在哪一个区域</p>
    <p>还可用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写形式，直接指定项目的位置row-start / column-start / row-end / column-end</p>
    <div class="grid-area">
      <div class="item item-1">1</div>
      <div class="item item-2">2</div>
      <div class="item item-3">3</div>
      <div class="item item-4">4</div>
      <div class="item item-5">5</div>
      <div class="item item-6">6</div>
      <div class="item item-7">7</div>
      <div class="item item-8">8</div>
      <div class="item item-9">9</div>
    </div>
    <div class="grid-area-num">
      <div class="item item-1">1</div>
      <div class="item item-2">2</div>
      <div class="item item-3">3</div>
      <div class="item item-4">4</div>
      <div class="item item-5">5</div>
      <div class="item item-6">6</div>
      <div class="item item-7">7</div>
      <div class="item item-8">8</div>
      <div class="item item-9">9</div>
    </div>
  </section>
  <div class="divider"></div>
  <section>
    <p>justify-self属性设置单元格内容的水平位置（左中右），跟justify-items属性的用法完全一致，但只作用于单个项目。align-self属性设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，也是只作用于单个项目。</p>
    <p>place-self属性是align-self属性和justify-self属性的合并简写place-self: align-self justify-self</p>
    <div class="grid-self">
      <div class="item item-1">1</div>
      <div class="item item-2">2</div>
      <div class="item item-3">3</div>
      <div class="item item-4">4</div>
      <div class="item item-5">5</div>
      <div class="item item-6">6</div>
      <div class="item item-7">7</div>
      <div class="item item-8">8</div>
      <div class="item item-9">9</div>
    </div>
  </section>

</body>
</html>